<template>
  <div class="login" style="height: 100%">
      <el-row style="z-index: 1">
          <el-col  :offset="9" :span="7" style="margin-left: 0%">
              <el-card class="login-box"  style="padding:0px;" element-loading-background="rgba(0, 0, 0, 0.8)">
                  <el-form
                          :model="loginForm"
                          :rules="rules"
                          ref="loginForm"
                          label-width="10px"
                          class="demo-loginForm"
                  >
                      <h1 class="title">睿享医院体检预约管理系统</h1>
                      <el-form-item style="padding-right: 10px;" prop="account">
                          <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入用户名"></el-input>
                      </el-form-item>
                      <el-form-item style="padding-right: 10px;" prop="password">
                          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
                      </el-form-item>
                      <el-form-item style="padding-right: 10px;">
                          <el-button type="primary" @click="submitForm('loginForm')"  class="pull-right" style="width:100%">登录</el-button>
                      </el-form-item>
                  </el-form>
              </el-card>
          </el-col>
      </el-row>
  </div>
  </template>
  <script>
  //引入时间工具类
  import {dateFormat} from '../assets/js/tools' 
  import {loginLogs} from '../assets/js/tools' 
  export default {
      
      name:'',
      data(){
        return{
          loginForm: {
              account: "",
              password: "",
          },
          rules: {
              account: [{required: true, message: "请输入用户名称", trigger: "blur" }],
              password: [{required: true, message: "请输入用户密码", trigger: "blur" }],
          },
          globals:{ 
              'returnCitySN': true
          },
          ip: 'ss'
        }
      },
  //部件
   components: {
   },
  //静态
   props: {
   },
  //对象内部的属性监听，也叫深度监听
   watch: {
   },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
   computed: { 
   },
  //方法表示一个具体的操作，主要书写业务逻辑；
   methods: { 
     //登录表单提交验证
     submitForm(formName) {
      this.$refs[formName].validate((valid) => {
      if (valid) {
        if (this.loginForm.account !== 'admin') { // 判断用户输入的账号是否为admin
          this.$message.error("非管理员账号，无法登录");
        } else {
          // 发送异步请求
          let _this = this;
          this.axios.get("/api/login", {
            params: {
              account: _this.loginForm.account,
              password: _this.loginForm.password,
            }
          }).then(res => {
            if (res.data == '') {
              this.$message.warning("登录失败, 账号或密码错误");
            } else if (res.data[0].status == '0') {
              this.$message.error("登录失败, 账号存在异常，请联系管理员");
            } else {
              // 赋值
              window.sessionStorage.setItem('userInfo', JSON.stringify(res.data));
              // 进行登录日志记录等操作
              loginLogs(res.data[0].uid, this.ip, "0");
              this.$message.success("登录成功");
              setTimeout(() => {
                this.$router.replace('/user');
              }, 800);
            }
          });
        }
      } else {
        console.log("提交格式错误!!");
        return false;
      }
    });
  }},
  //请求数据
   created() {
        this.ip = sessionStorage.getItem('ip')
  },
   mounted() {
  }
  }
  </script>
  
  <style scoped>
     .login{
      width: 500px;
     }
     .el-divider {
          height: 200px !important;
      }
      .el-row {
          height: 100%;
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;
      }
      .el-form-item__content {
          display: flex;
      }
      .el-input {
          flex: 1;
      }
      .yzmimg{
          margin-left: 5px;
          border-radius: 5px;
      }
      .login {
          background: url("../assets/images/827.jpg") no-repeat scroll center center / cover;
          background-size: 100% 100%;
          width: 100%;
          height: 100%;
          position: fixed;
      }
  
      .login-box {
          background: #ffffff;
          border: none;
      }
  
      .login-box-msg {
          color: #000000;
          text-align: center;
      }
  
      .login-box .title {
          color: #000000;
          text-align: center;
      }
  
  </style>
  
  
  